<template>
    <div name="myleave">
        <el-card class="!border-none" shadow="never">
            <el-alert type="warning" :closable="false" show-icon>温馨提示：您本年度年休假（总：{{ leaveinfo.hav_annual }}天 / 可用：{{
                leaveinfo.hav_annual - leaveinfo.use_annual }} 天），育儿假（总：{{ leaveinfo.hav_childcare }}天 / 可用：{{
                leaveinfo.hav_childcare - leaveinfo.use_childcare }}天 ），照料假（总：{{ leaveinfo.hav_care }}天 / 可用：{{
                leaveinfo.hav_care - leaveinfo.use_care }}天 ），探亲假(已请：{{ leaveinfo.use_home }}天)，产假(已请：{{
                leaveinfo.use_nursing }}天)，护理假(已用：{{
                leaveinfo.use_maternity }}天)，丧假(已用：{{
                leaveinfo.use_die }}天)，婚假(已用：{{
                leaveinfo.use_marry }}天)，病假(已用：{{
                leaveinfo.use_sick }}天)，事假(已用：{{
                leaveinfo.use_absence }}天)</el-alert>
            <el-alert type="warning" :closable="false" show-icon>销假：请在休假完毕后3日内销假,如需提前销假，则需要上级审批通过。
            </el-alert>
            <el-alert type="warning" :closable="false" show-icon>相关文件： <el-link
                    href="http://likeadmin.dlydwei.cn/uploads/files/请休假考勤办法.pdf" target="_blank">请休假考勤办法</el-link>
            </el-alert>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <div>
                <el-button class="mb-4" v-perms="['approval.leave/myleave']" type="primary" @click="handleAdd()">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    新增请假
                </el-button>
            </div>

        </el-card>
        <el-table size="large" v-loading="pager.loading" :data="pager.lists">
            <el-table-column label="请假类型" prop="holiday_desc" />
            <el-table-column label="请假时间" prop="leave_time" />
            <el-table-column label="请假天数" prop="leaveDay" />
            <el-table-column label="有效天数" prop="trueDay" />
            <el-table-column label="审批状态" prop="status_desc" />
            <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                    <el-button v-if="row.status == 0 || row.status == -20" type="primary" @click="handleEdit(row)" link>
                        编辑
                    </el-button>
                    <el-button v-if="row.status == 0  || row.status == -20 " type="danger" link @click="handleDelete(row.id)">
                        撤回
                    </el-button>
                    <el-button v-if="row.status == 20" type="danger" link @click="handleCancle(row)">
                        销假
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex justify-end mt-4">
            <pagination v-model="pager" @change="getLists" />
        </div>
        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
        <cancle-popup v-if="showEdit" ref="cancleRef" @success="getLists" @close="showEdit = false" />
    </div>
</template>
<script lang="ts" setup name="myleave">
import type { ElTable, FormInstance } from 'element-plus'
import request from '@/utils/request'
import useUserStore from '@/stores/modules/user'
import { usePaging } from '@/hooks/usePaging'
import { LeaveMyLists, leaveDelete } from '@/api/leave'
import EditPopup from './edit.vue'
import CanclePopup from './cancle.vue'
import feedback from '@/utils/feedback'
const userStore = useUserStore()
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const cancleRef = shallowRef<InstanceType<typeof CanclePopup>>()
const showEdit = ref(false)
const leaveinfo = ref<any[]>([])
const myinfo = async () => {
    leaveinfo.value = await request.post({ url: '/approval.leave/myinfo', params: { mid: userStore.userInfo.id } })
    console.log('leaveinfo=', leaveinfo.value);
}
const queryParams = reactive({
    mid: userStore.userInfo.id
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: LeaveMyLists,
    params: queryParams
})
const handleCancle = async (data: any) => {
    showEdit.value = true
    await nextTick()
    cancleRef.value?.open('mycancle')
    cancleRef.value?.getDetail(data)
    getLists()
}
const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getDetail(data)
    getLists()
}
const handleAdd = async (id?: number) => {
    showEdit.value = true
    await nextTick()
    // if (id) {
    //     editRef.value?.setFormData({
    //         id: id
    //     })
    // }
    editRef.value?.open('add')
    getLists()
}
/**撤回请假 */
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要撤回？')
    await leaveDelete({ id })
    getLists()
}
onMounted(async () => {
    myinfo()
    await getLists()
    console.log('lists=', pager);

    //userStore.getUserInfo()
    // console.log('userStore=', userStore.userInfo);
    // console.log('userStore=', userStore);
    // nextTick(() => {
    //     handleExpand()
    // })
})
getLists()
</script>
